<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>医院管理系统</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.min.css">
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.full.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.6.8/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@6.5.1/css/all.min.css">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .form-transition-enter-active, .form-transition-leave-active {
      transition: all 0.3s ease;
    }
    .form-transition-enter-from, .form-transition-leave-to {
      opacity: 0;
      transform: translateX(20px);
    }
    .active-tab {
      background-color: #409eff;
      color: white;
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
<div id="app" class="w-full max-w-md">
  <el-card class="shadow-lg border-0 rounded-xl overflow-hidden">
    <div class="p-6">
      <div class="text-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">医院管理系统</h2>
        <p class="text-gray-500 mt-1">{{ isLogin ? '请输入账号和密码登录' : '请填写信息完成注册' }}</p>
      </div>

      <!-- 登录/注册切换 -->
      <div class="flex mb-6 bg-gray-100 rounded-lg p-1">
        <button
                @click="isLogin = true"
                :class="['flex-1 py-2 rounded-md font-medium transition-colors', isLogin ? 'active-tab' : 'text-gray-600 hover:text-gray-800']"
        >
          登录
        </button>
        <button
                @click="isLogin = false"
                :class="['flex-1 py-2 rounded-md font-medium transition-colors', !isLogin ? 'active-tab' : 'text-gray-600 hover:text-gray-800']"
        >
          注册
        </button>
      </div>

      <!-- 登录表单 -->
      <transition name="form-transition" mode="out-in">
        <el-form
                v-if="isLogin"
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginRules"
                class="space-y-4"
                @submit.prevent="handleLogin"
        >
          <el-form-item prop="phone">
            <el-input
                    v-model="loginForm.phone"
                    name="phone"
                    placeholder="请输入手机号或邮箱"
                    prefix-icon="User"
                    autocomplete="username"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
                    v-model="loginForm.password"
                    name="password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="Lock"
                    autocomplete="current-password"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
                    type="primary"
                    class="w-full"
                    size="large"
                    name="login"
                    :loading="loading"
                    native-type="submit"
            >
              <i class="fas fa-sign-in-alt mr-1"></i> 登录
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 注册表单 -->
        <el-form
                v-else
                ref="registerFormRef"
                :model="registerForm"
                :rules="registerRules"
                class="space-y-4"
                @submit.prevent="handleRegister"
        >
          <el-form-item prop="name">
            <el-input
                    v-model="registerForm.name"
                    placeholder="请输入用户名"
                    prefix-icon="User"
            ></el-input>
          </el-form-item>

          <el-form-item prop="phone">
            <el-input
                    v-model="registerForm.phone"
                    placeholder="请输入手机号"
                    prefix-icon="Phone"
            ></el-input>
          </el-form-item>

          <el-form-item prop="email">
            <el-input
                    v-model="registerForm.email"
                    placeholder="请输入邮箱"
                    prefix-icon="Message"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="Lock"
                    show-password
            ></el-input>
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <el-input
                    v-model="registerForm.confirmPassword"
                    type="password"
                    placeholder="请确认密码"
                    prefix-icon="Lock"
                    show-password
            ></el-input>
          </el-form-item>

          <el-form-item prop="role">
            <el-radio-group v-model="registerForm.role" class="w-full">
              <el-radio label="doctor" class="w-1/2">医生</el-radio>
              <el-radio label="patient" class="w-1/2">患者</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button
                    type="primary"
                    class="w-full"
                    size="large"
                    :loading="loading"
                    native-type="submit"
            >
              <i class="fas fa-user-plus mr-1"></i> 注册
            </el-button>
          </el-form-item>
        </el-form>
      </transition>
    </div>
  </el-card>
</div>

<script>
  // 配置Axios默认设置
  axios.defaults.baseURL = 'http://localhost:8080';
  axios.defaults.headers.post['Content-Type'] = 'application/json';
  axios.defaults.withCredentials = true;

  const { createApp, ref, reactive } = Vue;
  const { ElMessage } = ElementPlus;

  createApp({
    setup() {
      // 登录/注册状态
      const isLogin = ref(true);

      // 登录表单数据 - 改回使用phone字段，与老界面保持一致
      const loginForm = reactive({
        phone: '', // 改回phone字段
        password: ''
      });

      // 注册表单数据
      const registerForm = reactive({
        name: '',
        phone: '',
        email: '',
        password: '',
        confirmPassword: '',
        role: 'patient' // 改为英文
      });

      // 登录表单验证规则 - 改回使用phone字段
      const loginRules = {
        phone: [ // 改回phone字段
          { required: true, message: '请输入手机号或者邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      };

      // 注册表单验证规则
      const registerRules = {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '密码长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== registerForm.password) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      };

      // 表单引用
      const loginFormRef = ref(null);
      const registerFormRef = ref(null);

      // 加载状态
      const loading = ref(false);

      // 处理登录 - 改回使用phone字段
      const handleLogin = async () => {
        // 表单验证
        const valid = await loginFormRef.value.validate();
        if (!valid) return;

        loading.value = true;

        try {
          // 调用登录接口 - 改回传递phone字段，与老界面保持一致
          const response = await axios.post('/user/login', {
            phone: loginForm.phone, // 改回phone字段
            password: loginForm.password
          });

          const result = response.data;

          if (result.code === 200) {
            ElMessage.success('登录成功');
            // 存储用户信息到本地存储
            localStorage.setItem('userInfo', JSON.stringify(result.data));
            // 登录成功后跳转到主页
            setTimeout(() => {
              window.location.href = '/homepage.html';
            }, 1000);
          } else {
            ElMessage.error(result.msg || '登录失败');
          }
        } catch (error) {
          console.error('登录请求失败', error);
          ElMessage.error('登录失败，请检查网络或联系管理员');
        } finally {
          loading.value = false;
        }
      };

      // 处理注册
      const handleRegister = async () => {
        // 表单验证
        const valid = await registerFormRef.value.validate();
        if (!valid) return;

        loading.value = true;

        try {
          // 调用注册接口
          const response = await axios.post('/user/register', {
            name: registerForm.name,
            phone: registerForm.phone,
            email: registerForm.email,
            password: registerForm.password,
            role: registerForm.role
          });

          const result = response.data;

          if (result.code === 200) {
            ElMessage.success('注册成功');
            // 存储用户信息到本地存储
            localStorage.setItem('userInfo', JSON.stringify(result.data));
            // 注册成功后跳转到主页
            setTimeout(() => {
              window.location.href = '/homepage.html';
            }, 1000);
          } else {
            ElMessage.error(result.msg || '注册失败');
          }
        } catch (error) {
          console.error('注册请求失败', error);
          ElMessage.error('注册失败，请检查网络或联系管理员');
        } finally {
          loading.value = false;
        }
      };

      return {
        isLogin,
        loginForm,
        registerForm,
        loginRules,
        registerRules,
        loginFormRef,
        registerFormRef,
        loading,
        handleLogin,
        handleRegister
      };
    }
  }).use(ElementPlus).mount('#app');
</script>
</body>
</html>
